<!--<template>-->
<!--  <div class="change-password-box">-->
<!--    <h1 id="form-title">修改密码</h1>-->
<!--    <form @submit.prevent="handleChangePassword">-->
<!--      <div class="form-item">-->
<!--        <label for="oldpassword">旧密码:</label>-->
<!--        <div class="input-container">-->
<!--          <input-->
<!--              type="password"-->
<!--              id="oldpassword"-->
<!--              v-model="oldPassword"-->
<!--              required-->
<!--              class="inputStyle"-->
<!--              :type="showOldPassword ? 'text' : 'password'"-->
<!--          />-->
<!--          <button type="button" class="toggle-password" @click="toggleShowOldPassword">-->
<!--            <i :class="showOldPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>-->
<!--          </button>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="form-item">-->
<!--        <label for="newPassword">新密码:</label>-->
<!--        <div class="input-container">-->
<!--          <input-->
<!--              type="password"-->
<!--              id="newPassword"-->
<!--              v-model="newPassword"-->
<!--              required-->
<!--              class="inputStyle"-->
<!--              :type="showNewPassword ? 'text' : 'password'"-->
<!--          />-->
<!--          <button type="button" class="toggle-password" @click="toggleShowNewPassword">-->
<!--            <i :class="showNewPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>-->
<!--          </button>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="form-item">-->
<!--        <label for="confirmPassword">确认新密码:</label>-->
<!--        <div class="input-container">-->
<!--          <input-->
<!--              type="password"-->
<!--              id="confirmPassword"-->
<!--              v-model="confirmPassword"-->
<!--              required-->
<!--              class="inputStyle"-->
<!--              :type="showConfirmPassword ? 'text' : 'password'"-->
<!--          />-->
<!--          <button type="button" class="toggle-password" @click="toggleShowConfirmPassword">-->
<!--            <i :class="showConfirmPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>-->
<!--          </button>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="form-item">-->
<!--        <button type="submit" class="change-password-btn">修改密码</button>-->
<!--      </div>-->
<!--      <div v-if="errorMessage" class="error-message">-->
<!--        {{ errorMessage }}-->
<!--      </div>-->
<!--      <div class="action-links">-->
<!--        <a @click="handleLogin" class="link-text">返回登录</a>-->
<!--      </div>-->
<!--    </form>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      oldPassword: '',-->
<!--      newPassword: '',-->
<!--      confirmPassword: '',-->
<!--      errorMessage: '',-->
<!--      showOldPassword: false,-->
<!--      showNewPassword: false,-->
<!--      showConfirmPassword: false-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    handleChangePassword() {-->
<!--      // 验证新旧密码是否相同-->
<!--      if (this.newPassword === this.oldPassword) {-->
<!--        this.errorMessage = '新密码不能与旧密码相同';-->
<!--        return;-->
<!--      }-->

<!--      // 验证新密码格式-->
<!--      const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;-->
<!--      if (!passwordPattern.test(this.newPassword)) {-->
<!--        this.errorMessage = '新密码必须包含数字和字母，并且长度在 8 到 16 位之间';-->
<!--        return;-->
<!--      }-->

<!--      // 验证新密码和确认密码是否一致-->
<!--      if (this.newPassword !== this.confirmPassword) {-->
<!--        this.errorMessage = '新密码和确认密码不一致';-->
<!--        return;-->
<!--      }-->

<!--      // 清除错误信息-->
<!--      this.errorMessage = '';-->

<!--      // 模拟修改密码成功-->
<!--      this.$router.push('/Login'); // 修改成功返回登录界面-->
<!--    },-->
<!--    handleLogin() {-->
<!--      this.$emit('change-component', 'Login');-->
<!--    },-->
<!--    toggleShowOldPassword() {-->
<!--      this.showOldPassword = !this.showOldPassword;-->
<!--    },-->
<!--    toggleShowNewPassword() {-->
<!--      this.showNewPassword = !this.showNewPassword;-->
<!--    },-->
<!--    toggleShowConfirmPassword() {-->
<!--      this.showConfirmPassword = !this.showConfirmPassword;-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.change-password-box {-->
<!--  background: linear-gradient(to bottom right, rgba(13, 13, 13, 0.55) 0%, white 60%, rgba(13, 13, 13, 0.55) 100%);-->
<!--  width: 380px;-->
<!--  height: 490px;-->
<!--  margin: 0 auto;-->
<!--  border-radius: 15px;-->
<!--  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);-->
<!--  backdrop-filter: blur(8px);-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--}-->

<!--#form-title {-->
<!--  text-align: center;-->
<!--  margin: 20px 20px;-->
<!--  font-size: 36px;-->
<!--  font-weight: bold;-->
<!--  color: #2c3e50;-->
<!--}-->

<!--.form-item {-->
<!--  margin-bottom: 25px;-->
<!--  width: 100%;-->
<!--}-->

<!--.form-item label {-->
<!--  display: block;-->
<!--  margin-bottom: 8px;-->
<!--  color: #34495e;-->
<!--  font-weight: 500;-->
<!--}-->

<!--.input-container {-->
<!--  position: relative;-->
<!--  width: 100%;-->
<!--}-->

<!--.inputStyle {-->
<!--  width: 100%;-->
<!--  height: 42px;-->
<!--  padding: 0 45px 0 15px; /* 调整 padding 以适应图标 */-->
<!--  border: 2px solid #bdc3c7;-->
<!--  border-radius: 8px;-->
<!--  font-size: 1rem;-->
<!--  transition: border-color 0.3s;-->
<!--  box-sizing: border-box;-->
<!--}-->

<!--.inputStyle:focus {-->
<!--  border-color: #3498db;-->
<!--  outline: none;-->
<!--}-->

<!--.toggle-password {-->
<!--  position: absolute;-->
<!--  right: 10px;-->
<!--  top: 50%;-->
<!--  transform: translateY(-50%);-->
<!--  background: none;-->
<!--  border: none;-->
<!--  color: #3498db;-->
<!--  cursor: pointer;-->
<!--  font-size: 1.2rem; /* 调整图标大小 */-->
<!--}-->

<!--.toggle-password:hover {-->
<!--  color: #e74c3c;-->
<!--}-->

<!--.change-password-btn {-->
<!--  font-size: 16px;-->
<!--  width: 100%;-->
<!--  height: 45px;-->
<!--  background: #28292CFF;-->
<!--  color: white;-->
<!--  border: none;-->
<!--  border-radius: 8px;-->
<!--  cursor: pointer;-->
<!--  transition: background 0.3s;-->
<!--  margin-top: 15px;-->
<!--}-->

<!--.change-password-btn:hover {-->
<!--  background: #000000FF;-->
<!--}-->

<!--.action-links {-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  margin-top: 20px;-->
<!--  width: 100%;-->
<!--}-->

<!--.link-text {-->
<!--  color: #2c3e50;-->
<!--  cursor: pointer;-->
<!--  font-size: 0.95rem;-->
<!--  text-decoration: underline;-->
<!--  transition: color 0.3s;-->
<!--}-->

<!--.link-text:hover {-->
<!--  color: #e74c3c;-->
<!--}-->

<!--.error-message {-->
<!--  color: red;-->
<!--  text-align: center;-->
<!--  margin-top: 10px;-->
<!--}-->

<!--/* 移动端适配 */-->
<!--@media (max-width: 768px) {-->
<!--  .change-password-box {-->
<!--    width: 85%;-->
<!--    height: auto;-->
<!--    padding: 25px;-->
<!--    margin-top: 60px;-->
<!--    backdrop-filter: none;-->
<!--    background: rgba(173, 216, 230, 0.95);-->
<!--  }-->

<!--  #form-title {-->
<!--    font-size: 36px;-->
<!--  }-->

<!--  .inputStyle {-->
<!--    height: 38px;-->
<!--  }-->

<!--  .change-password-btn {-->
<!--    height: 42px;-->
<!--    font-size: 1rem;-->
<!--  }-->

<!--  .action-links {-->
<!--    flex-direction: column;-->
<!--    align-items: center;-->
<!--    gap: 12px;-->
<!--  }-->

<!--  .link-text {-->
<!--    margin-top: 10px;-->
<!--  }-->
<!--}-->

<!--@media (max-width: 480px) {-->
<!--  .change-password-box {-->
<!--    width: 90%;-->
<!--  }-->

<!--  #form-title {-->
<!--    font-size: 30px;-->
<!--  }-->

<!--  .inputStyle {-->
<!--    height: 36px;-->
<!--  }-->

<!--  .change-password-btn {-->
<!--    height: 40px;-->
<!--    font-size: 0.9rem;-->
<!--  }-->
<!--}-->
<!--</style>-->
<template>
  <div class="change-password-box">
    <h1 id="form-title">修改密码</h1>
    <form @submit.prevent="handleChangePassword">
      <div class="form-item">
        <label for="oldpassword">旧密码:</label>
        <div class="input-container">
          <input
              id="oldpassword"
              v-model="oldPassword"
              required
              class="inputStyle"
              :type="showOldPassword ? 'text' : 'password'"
              placeholder="请输入旧密码"
          />
          <button type="button" class="toggle-password" @click="toggleShowOldPassword">
            <i :class="showOldPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
          </button>
        </div>
      </div>
      <div class="form-item">
        <label for="newPassword">新密码:</label>
        <div class="input-container">
          <input
              id="newPassword"
              v-model="newPassword"
              required
              class="inputStyle"
              :type="showNewPassword ? 'text' : 'password'"
              placeholder="8-16位数字字母组合"
          />
          <button type="button" class="toggle-password" @click="toggleShowNewPassword">
            <i :class="showNewPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
          </button>
        </div>
      </div>
      <div class="form-item">
        <label for="confirmPassword">确认新密码:</label>
        <div class="input-container">
          <input
              id="confirmPassword"
              v-model="confirmPassword"
              required
              class="inputStyle"
              :type="showConfirmPassword ? 'text' : 'password'"
              placeholder="请再次输入新密码"
          />
          <button type="button" class="toggle-password" @click="toggleShowConfirmPassword">
            <i :class="showConfirmPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
          </button>
        </div>
      </div>
      <div class="form-item">
        <button type="submit" class="change-password-btn">修改密码</button>
      </div>
      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>
      <div class="action-links">
        <a @click="handleLogin" class="link-text">返回登录</a>
      </div>
    </form>
  </div>
</template>

<script>export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      errorMessage: '',
      showOldPassword: false,
      showNewPassword: false,
      showConfirmPassword: false
    };
  },
  methods: {
    handleChangePassword() {
      if (this.newPassword === this.oldPassword) {
        this.errorMessage = '新密码不能与旧密码相同';
        return;
      }
      const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;
      if (!passwordPattern.test(this.newPassword)) {
        this.errorMessage = '密码需为8-16位数字字母组合';
        return;
      }
      if (this.newPassword !== this.confirmPassword) {
        this.errorMessage = '两次输入密码不一致';
        return;
      }
      this.errorMessage = '';
      this.$router.push('/'); // 修改成功后返回到登录页面
    },
    handleLogin() {
      this.$router.push('/'); // 返回到登录页面
    },
    toggleShowOldPassword() {
      this.showOldPassword = !this.showOldPassword;
    },
    toggleShowNewPassword() {
      this.showNewPassword = !this.showNewPassword;
    },
    toggleShowConfirmPassword() {
      this.showConfirmPassword = !this.showConfirmPassword;
    }
  }
};
</script>

<style scoped>
.change-password-box {
  background: linear-gradient(to bottom right,
  rgba(13, 13, 13, 0.55) 0%,
  white 60%,
  rgba(13, 13, 13, 0.55) 100%);
  width: 380px;
  height: 490px;
  margin: 0 auto;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#form-title {
  text-align: center;
  margin: 20px;
  font-size: 36px;
  font-weight: bold;
  color: #2c3e50;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.form-item {
  margin-bottom: 25px;
  width: 100%;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  color: #34495e;
  font-weight: 500;
}

.input-container {
  position: relative;
  width: 100%;
}

.inputStyle {
  width: 100%;
  height: 42px;
  padding: 0 45px 0 15px;
  border: 2px solid #bdc3c7;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.inputStyle:focus {
  border-color: #3498db;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);
  outline: none;
}

.toggle-password {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #7f8c8d;
  cursor: pointer;
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}

.toggle-password:hover {
  color: #3498db;
}

.toggle-password i {
  font-size: 1.2rem;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

.change-password-btn {
  font-size: 16px;
  width: 100%;
  height: 45px;
  background: #28292C;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 15px;
}

.change-password-btn:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.action-links {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}

.link-text {
  color: #2c3e50;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: underline;
  transition: color 0.3s;
}

.link-text:hover {
  color: #e74c3c;
}

.error-message {
  color: #e74c3c;
  text-align: center;
  margin-top: 10px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .change-password-box {
    width: 85%;
    height: auto;
    padding: 25px;
    margin-top: 60px;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }

  #form-title {
    font-size: 32px;
  }

  .inputStyle {
    height: 38px;
  }

  .toggle-password {
    width: 35px;
  }
}

@media (max-width: 480px) {
  .change-password-box {
    width: 90%;
    padding: 20px;
  }

  #form-title {
    font-size: 28px;
  }

  .inputStyle {
    height: 36px;
    padding: 0 40px 0 12px;
  }

  .toggle-password {
    width: 30px;
  }
}
</style>
